<template>
  <view class="Index">
    <z-paging ref="paging" v-model="cpList" @query="getcplist">
      <template #top>
        <view style="box-shadow: 0px 0px 15rpx 1rpx rgba(78, 101, 153, 0.2)">
          <div style="height: 20rpx; width: 100vw"></div>
          <view style="padding: 0 0 20rpx 0">
            <u-search
              shape="round"
              v-model="keyword"
              @custom="search"
              @clear="search"
            ></u-search>
          </view>
        </view>
      </template>
      <!-- 瀑布流布局列表 -->
      <view class="pubuBox">
        <view class="pubuItem">
          <view
            v-for="(item, index) in cpList"
            :key="index"
            class="item-masonry"
            @click="goProductDetails(item)"
          >
            <image
              :src="item.url"
              mode="widthFix"
              style=" 
                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
              "
            ></image>
            <view class="listtitle">
              <!-- 这是没有高度的父盒子（下半部分） -->
              <view class="listtitle11">
                <view class="listtitle1">{{ item.title }}</view>
                <view>库存：{{ item.store }}</view>
              </view>
              <view class="listtitle2">
                <view
                  class=""
                  hover-class="none"
                  hover-stop-propagation="false"
                >
                  <text class="listtitle2son fs20r" style=" vertical-align: baseline; ">￥</text>
                  {{ item.price }}
                </view>
                <view style="color: #000" class="listtitle5">
                  销量： {{ item.text2 }}
                </view>
              </view>
              <!-- <view class="listtitle3"> 某某某某旗舰店 </view> -->
            </view>
          </view>
        </view>
      </view>
    </z-paging>
  </view>
</template>

<script>
import { listall } from "../../api/old";

export default {
  data() {
    return {
      cpList: [], //商品列表
      pid: "",
      keyword: "",
    };
  },
  onShow() {},
  onShareAppMessage() {
    return {
      title: "魔翡师",
    };
  },
  // 分享到朋友圈
  onShareTimeline() {
    return {
      title: "魔翡师",
    };
  },
  onLoad(e) {
    this.pid = e.Id;
  },
  methods: {
    goProductDetails(val) {
      console.log(val, "prodId");
      uni.navigateTo({
        url: `/pages/goods/detail?Id=${val.id}`,
      });
    },
    search() {
      this.getcplist();
    },

    async getcplist(pageNo = 1) {
      uni.showLoading({
        title: "加载中",
      });

      listall({
        param: this.keyword,
        pageNum: pageNo,
        pageSize: 10,
      })
        .then((res) => {
          this.$refs.paging.complete(res.rows);
        })
        .catch((err) => {
          console.log("cl");
          this.$refs.paging.complete();
        });

      setTimeout(function () {
        uni.hideLoading();
      }, 200);
    },
  },
};
</script>

<style lang="scss" scoped="scoped">
//瀑布流
page {
  background-color: #eee;
  height: 100%;
}

.pubuBox {
  padding: 22rpx;
}

.pubuItem {
  column-count: 2;
  column-gap: 20rpx;
}

.item-masonry {
  box-sizing: border-box;
  border-radius: 15rpx;
  overflow: hidden;
  background-color: #fff;
  break-inside: avoid;
  /*避免在元素内部插入分页符*/
  box-sizing: border-box;
  margin-bottom: 20rpx;
  box-shadow: 0px 0px 28rpx 1rpx rgba(78, 101, 153, 0.14);
}

.item-masonry image {
  width: 100%;
}

.listtitle {
  padding: 15rpx;
  font-size: 24rpx;
  padding-bottom: 22rpx;
  box-sizing: border-box;
  .listtitle11 {
    display: flex;

    justify-content: space-between;
    // align-content: center;
    align-items: center;
    .listtitle1 {
      box-sizing: border-box;
      line-height: 39rpx;
      text-overflow: -o-ellipsis-lastline;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
      min-height: 39rpx;
      max-height: 78rpx;
    }
  }

  .listtitle2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #ff0000;
    font-size: 32rpx;
    line-height: 32rpx;
    font-weight: bold;
    padding-top: 15rpx;
    // padding-right: 20rpx;

    .listtitle2son {
      // font-size: 32rpx;
    }
    .listtitle5 {
      font-size: 28rpx;
      line-height: 32rpx;
      font-weight: normal;
    }
  }

  .listtitle3 {
    font-size: 28rpx;
    color: #909399;
    line-height: 32rpx;
    padding-top: 22rpx;
  }
}

.Index {
  width: 100%;
  height: 100%;
}
</style>
